2023鐵人賽＿Vue2基本使用規則(Day13)-SET函數

2023 iThome 鐵人賽

DAY 13

自我挑戰組

Vue2 初步認識以及基本使用規則 && 了解 Vue2 的基本原理系列第 13 篇

15th鐵人賽 vue2 vue函數

yuchen1226

團隊大壯們的首次鐵人賽

2023-09-13 00:36:22

568 瀏覽

分享至

本章節會介紹Vue所配置的函數Vue.set()
其可以達到從外部像Vue.data新增對象

初始數據

<body>
    <div id="root">
        <h3>{{person.name}}</h3>
        <h3>{{person.age}}</h3>
    </div>
    <script>
        var vm = new Vue({
            el : "#root",
            data : {
                person : {
                    name : 'Adam'
                }
            }
        })
    </script>
</body>

錯誤示範

若要新增一筆新的資料時候使用 → vm.＿data.age = 24
頁面不會因此使用到age資料
其單單只是在 Vue實例對象中
暴力的直接放入一個 age = 24 的對象而已
跟上一章節提到陣列的處理有幾分相似

使用這樣的方式新增資料會造成問題
資料雖然新增了,但其實新增的資料並未配置,vue給予的get(),set()配置項
vue不會感受到資料的異動

使用Vue.set()

Vue.set(target,key,val)的參數介紹 :

target : 要新增新數據的目標位置
key : 新增的 key名稱
value : 新增的 value
範例(完整寫法) : Vue.set(vm.＿data.person,‘age’, 24)

使用Vue.set()可以達到外部新增對象的需求
其配置也跟初始數據是一樣的

可以看到age擁有Vue可以使用的get(),set()

簡寫

Vue.set(vm.person,‘age’,24)
若在vm配置的methods或是compute可以寫this.person就好
(＿data可審略不寫)

使用注意

在vue中會希望data內有起碼兩層結構
根數據基本是指接受對象,而不是value值
所以在使用Vue.set方法時,是不能直接在vm.＿data中新增新的資料

將程式碼做修改
age已經變成根數據

<body>
    <div id="root">
        <h3>{{person.name}}</h3>
        <h3>{{age}}</h3>
    </div>

    <script>
        var vm = new Vue({
            el : "#root",
            data : {
                person : {
                    name : 'Adam'
                }
            }
        })
    </script>
</body>